<template>
  <div class="theme">
    <svg-icon icon="change-theme" @click="drawer = true"></svg-icon>

    <el-drawer
      v-model="drawer"
      title="设置"
      :direction="direction"
      :before-close="handleClose"
    >
      <el-divider content-position="left" class="font-bold">
        主题设置
      </el-divider>
      <div class="item">
        <span class="label flex-1">primary</span>
        <el-color-picker v-model="themeColor" @change="onChangeTheme" />
      </div>

      <el-divider content-position="left" class="font-bold">
        全局设置
      </el-divider>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { generateNewStyle, writeNewStyle } from '@/utils/theme'
// import { i18nGlobal } from '@/utils/i18n.utils'
import { useAppStore } from '@/store'
const appStore = useAppStore()

const drawer = ref(false)
const direction = ref('rtl')

const handleClose = () => (drawer.value = false)

// 设置->主题色
const themeColor = ref(appStore.mainColor)
const onChangeTheme = async (color) => {
  const newStyle = await generateNewStyle(color)
  writeNewStyle(newStyle)
  appStore.setMainColor(color)
  handleClose()
}
</script>

<style lang="scss" scoped>
.theme {
  font-size: 20px;
  cursor: pointer;
  position: relative;

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .label {
      color: #666;
      font-size: 14px;
    }
  }

  ::v-deep {
    .el-drawer__header {
      padding: 10px 20px;
      margin-bottom: 0px;
      border: 1px solid #e6e6e6;
    }
    .el-drawer__body {
      padding-top: 0;
      padding-bottom: 0;
    }
  }
}
</style>
